// 权限控制
// Token权限
import router from './router'
import store from './store'
// 1.加载样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { asyncRoutes } from '@/router/asyncRoutes'

const whileList = ['/login', '/404']
// 在路由前置守卫实现
router.beforeEach(async(to, from, next) => {
  // 开启样式
  NProgress.start()
  // to 到哪去，from 从哪来，next 放行方法
  // 获取token
  // --------------引入main.js 权限模块
  const token = store.state.user.token
  if (token) {
    if (to.path === '/login') {
      next('/')
      NProgress.done()
    } else {
      next()
      // 1、在用户已经登录判断中调用
      // 2、当用户看前往非login页面的时候调用
      // 3、当vuex中已经存储数据 不需要重复调用
      if (!store.state.user.userInfo.userId) {
        const { data } = await store.dispatch('user/fetchUserInfo')
        // console.log(data.roles.menus, '后端过滤的全量路由数据')
        const filterRoutes = asyncRoutes.filter(item => data.roles.menus.includes(item.children[0].name))
        // console.log(filterRoutes, '通过后端返回的权限字段过滤出的用户可以访问的路由数量')
        // //         在路由上追加新的动态路由规则 addRoutes
        // // 添加完成之后就可以在页面上访问到对应的路由页面了
        router.addRoutes(filterRoutes)
        store.commit('menu/setMenuList', filterRoutes)
        // 第二次跳转
        next({
          ...to,
          replace: true
        })
        return
      }
    }
  } else {
    if (whileList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
})

router.afterEach(() => {
  // 加载完成
  NProgress.done()
})
